<template>
  <h1>我的购物车</h1>
  <ul>
    <li v-for="item in shoppingCartStore.carts" :key="item.productName">
      <span>{{ item.productName }}</span>
      <button @click="minus(item)">-</button>
      <span>{{ item.quantity }}个</span>
      <button @click="item.quantity++">+</button>
      <span>共：{{ item.price * item.quantity }}</span>
    </li>
  </ul>
  <span style="color: red; font-weight: 800"
    >总价：{{ shoppingCartStore.total }}</span
  >
  <button @click="shoppingCartStore.clear()">清空</button>
</template>

<script setup lang="ts">
import { useShoppingCartStore } from "../store";
import { IShoppingCart } from "../store/shoppingCart";

const shoppingCartStore = useShoppingCartStore();
const minus = function (cart: IShoppingCart) {
  cart.quantity--;
  if (cart.quantity > 0) return;
  shoppingCartStore.carts.splice(shoppingCartStore.carts.indexOf(cart), 1);
};
</script>

<style scoped>
span {
  display: inline-block;
  width: 120px;
  background-color: yellow;
}
</style>